<style>
    .el-dialog__body{
        padding-top: 0px !important;
    }
</style>
<template>
    <div class="divAroundCenter">
        <!--<el-dialog title="应用发布详情"  width="45%" center>-->
             <el-container style="height: 400px;"> 
            <el-tabs v-model="activeName" @tab-click="handleClick">
                   <!-- <el-container style="height: 500px;">  -->
                    
                <el-tab-pane label="基本情况" name="first">                                                         
                           <el-main style="height:400px;width:600px">
                    <el-row type="flex" class="row-bg" align="bottom" style="height:60px;margin-bottom:20px" >
                        <el-col :span="6"><div class="grid-content bg-purple" >应用图标:<img :src="detailData.logoImage" height="50px;" width="50px;"/></div></el-col>
                        <el-col :span="2">                          
                        </el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用名称: {{detailData.appName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="8"><div class="grid-content bg-purple">应用分类: {{detailData.className}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">开发商: {{detailData.supplierName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="8"><div class="grid-content bg-purple">系统应用: {{detailData.isSystemApp | formatYesNoFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用状态: {{detailData.status | formatStatusFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="8"><div class="grid-content bg-purple">应用类型: {{detailData.classification | formatClassificationFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用排序: {{detailData.sort}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="20"><div class="grid-content bg-purple">部署网段: {{detailData.network | formatNetworkFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="20"><div class="grid-content bg-purple">支持终端: {{detailData.appTerminal | formatAppTerminalFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" style="height:40px">
                        <el-col :span="20"><div class="grid-content bg-purple">功能介绍: {{detailData.describe}}</div></el-col>
                    </el-row>
                           </el-main>   
                </el-tab-pane>
                     <!-- </el-container> -->
                   <!-- <el-container style="height: 500px;">  -->
                 
                <el-tab-pane label="发布情况" name="second">
                     <el-main style="height:500px;width:600px">
                    <el-row >
                            <el-table :data="tableData" style="width: 100%"  >
                            <el-table-column prop="marketName"  label="市场名称">
                            </el-table-column>
                            <el-table-column prop="android" label="Android端">
                            </el-table-column>
                            <el-table-column prop="ios" label="iOS端">
                            </el-table-column>
                            <el-table-column prop="web" label="Web端">
                            </el-table-column>

                        </el-table>
                        <!--<el-col :span="23" class="toolbar  marginTop10px">-->
                            <!--<el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"-->
                                           <!--:current-page="pageNum" :page-size="pageSize" :total="total">-->
                            <!--</el-pagination>-->
                        <!--</el-col>-->
                    </el-row>   
                     </el-main>
                </el-tab-pane>
                   <!-- </el-container> -->
                
              
            </el-tabs>
        
  </el-container>
        <!--</el-dialog>-->
    </div>
</template>

<script>

    import utils from '@/views/api/utils.js';
    import {addApp, getApplicationTypeList, getSupplierList} from '@/views/api/api.js';


    export default {
        props: {appDetailInfo: ""}, // 用来接收父组件传给子组件的数据
        data() {
            return {
                detailData: {},
                activeName: 'first',
                appDetailVisible: false,
                detailStatus: 1,
                detailTextArea: '',
                tableData:[],
                total: 0,
                pageNum: 1,
                pageSize: 5

            }

        },

        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
            }
        },
        filters:{
            formatStatusFilter: function (value){
                return value == 0 ? '待审核' : value == 1 ? '审核通过' : value == 2 ? '审核不通过':'';
            },
            formatNetworkFilter: function(value){
                return value == 1 ? '移动互联网' : value == 2 ? '移动信息网' : value == 3 ? '公安信息网':'';
            },
            formatClassificationFilter: function(value){
                return value == 1 ? 'Ⅰ类应用' : value == 2 ? 'Ⅱ类应用' : value == 3 ? 'Ⅲ类应用':'';
            },
            formatYesNoFilter: function(value){
                return value == 0 ? '否' : value == 1 ? '是' : '';
            },
            formatAppTerminalFilter: function(value){
                if(value != undefined){
                    var arr = (value + "").split(",");
                    var str = "";
                    for(var i in arr){
                        if(arr[i] == '1'){
                            str += "Web、";
                        }else if(arr[i] == '2'){
                            str += "iOS、";
                        }else if(arr[i] == '3'){
                            str += "Android、";
                        }
                    }
                    return str.substring(0, str.length - 1);
                }
                return ;
            }
        },
        mounted() {
            let _this = this;
            // console.info(utils.getDictDatas("app_classification","type"));
            // console.log(utils.getDictDatasByType("app_classification"));
            // console.log("this.appDetailInfo:");
            // console.log(this.appDetailInfo);
            this.detailData = Object.assign({}, this.appDetailInfo);
            // let data = utils.getDictDatas("app_classification","type");
            // data.forEach(elemt => {
            //     if(_this.detailData.classification == elemt.value){
            //         this.detailData.classification = elemt.name;
            //     }
            // });
            // console.info("this.detailData");
            // console.info(this.detailData);
            this.tableData = this.detailData.publishMarkets;
            this.tableData.forEach(obj => {
                this.detailData.markets.forEach(elemt => {
                    if(obj.marketCode === elemt.marketCode){
                        obj.marketName = elemt.marketName;
                    }
                });
            });


        }
    }

</script>

<style scoped>
    .right {
        text-align: right;
    }

    .floatRight {
        float: right;
    }

    .divAroundCenter {
        padding: 20px 50px;
        width: 100%;
        height: 100%;
    }
</style>
